<template>
    <div class="register">
        <!-- logo和背景图片区域 -->
        <Logo></Logo>
        <!-- 手机号码和登录密码 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                
                 <!-- 手机号码输入框 -->
                 <img class="icon_phone" src="@/assets/img/icon_phone.png" alt="">
                <van-field
                    v-model="registerFrom.mobile"
                    name="mobile"
                    placeholder="请输入手机号码"
                    :rules="[{ validator: validatorPhone }]"
                />

                <!-- 密码输入框 -->
                <img class="icon_lock" src="@/assets/img/icon_lock@2x.png" alt="">
                <van-field
                    v-model="registerFrom.password"
                    name="password"
                    placeholder="请设置6~16位登录密码"
                    :rules="[{ validator: validatorPassword }]"
                    type="password"
                />
            </van-cell-group>
            <!-- 注册按钮 -->
            <div style="margin: 16px;">
                <van-button round block  native-type="submit" :disabled="!isagree">
                注册
                </van-button>
            </div>
            <!-- 同意注册协议和隐私政策 -->
                <van-checkbox v-model="isagree" checked-color="#FF8094" shape="square"  icon-size="16px">
                  我已阅读并同意《注册协议》和《隐私政策》
                </van-checkbox>
        </van-form>
    </div>
</template>

<script setup>
    // 引入组件
    import Logo from './loginComponents/logo.vue'
    import { reactive, ref } from 'vue'
    import { sendRegCode } from '@/api'
    import { getRandom } from '@/utils/random'
    import useLoginStore from '@/store/login'
    import { useRouter } from 'vue-router'
    const LoginStore = useLoginStore()
    const router = useRouter()
    //定义变量
    let registerFrom = reactive({
      mobile:null,
      password:null,
    })
    let isagree = ref(false);
    // 校验函数可以直接返回一段错误提示
    //校验手机号
    const validatorPhone = (val) => {
      if(!val){
        return '手机号码不能为空'
      }else if(!LoginStore.reg_phone.test(val)){
        return `${val} 不合规,请重新输入正确的手机号`;
      }
    }
    // 校验密码
    const validatorPassword = (val) => {
      if(!val){
        return '密码不能为空'
      }else if(!LoginStore.reg_password.test(val)){
        return `密码不安全,请重新输入6~16位数字加字母`;
      }
    }
    //登录验证成功时执行成功函数
    const onSubmit = async(values) => {
      values.username = `美呀用户${getRandom(10000,99999)}`
      console.log('submit', values);
      //向接口发送注册请求
      console.log('发送注册请求并拿到返回的状态');
      const res = await sendRegCode({
        mobile:values.mobile,
      })
      console.log(res);
      //请求成功则跳转到输入验证码界面，如果不成功则提示失败信息
      // console.log('请求成功则跳转到输入验证码界面');
      if(res.code==200){
        router.push({
          name:'regVerification',
          params:{
            ...values,
            code:res.user.code,
          }
        })
      }else{
        console.log(res.msg)
      }

    };
</script>

<style scoped>
  .register{
    display: flex;
    align-items: center;
    flex-direction: column;
    /* justify-content: space-between; */
  }
  /* 整个输入框盒子的样式 */
  :deep(.van-cell-group--inset){
   width: 337px;
   position: relative;
   margin-top: 50px;
  }
  :deep(.van-cell){
    border-bottom: 2px solid rgb(238, 238, 238);
    padding-bottom: 4px;
    line-height: 40px;
    position: relative;
  }
  /* 每个输入框的样式 */
  :deep(.van-field__control ){
    padding-top: 10px;
    height: 40px;
    padding-left: 50px;
    font-size: 18px;
  }
  /* 按钮样式 */
  :deep(.van-button--round){
    background-color:#FF8094 ;
    border: none;
    width: 300px;
    margin: auto;
    margin-top: 100px;
  }
  /* 错误信息样式 */
  :deep(.van-field__error-message){
    position:fixed;
    /* top: 40px;
    left:40px; */
    z-index: 200;
    left: 80px;
  }
  .icon_phone{
    width: 12px;
    z-index: 10;
    position: absolute;
    top: 24px;
    left: 8px;
  }
  .icon_lock{
    width: 19px;
    z-index: 10;
    position: absolute;
    top: 80px;
    left:5px
  }
  :deep(.van-checkbox){
    height: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 11px;
    color: rgb(102, 102, 102);
    margin-left: 50px;
  }


</style>